<template>
  <view>
    <view class="handlePeople"> 操作人：{{ infoData.name }} </view>
    <!-- <view class="content">
      <view class="title flex-row justify-between">
        <view>基础信息</view>
      </view>
      <u--form labelPosition="left" labelAlign="left" labelWidth="90">
        <u-form-item label="操作人：" borderBottom>
          <text class="">{{ infoData.name }}</text></u-form-item
        >
      </u--form>
    </view> -->

    <view class="box">
      <view class="item">
        <view class="label">
          <text class="must">*</text>
          备注：
        </view>
        <view class="remark">
          <u--textarea v-model="remark" placeholder="请输入内容"></u--textarea>
        </view>
      </view>
      <view class="item">
        <view class="label flex-row justify-between">
          <text> 附件： </text>
          <u-icon name="plus-circle" size="18"></u-icon>
        </view>
        <view class="imgs">
          <u-upload
            class="flexBox"
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            :maxCount="6"
          ></u-upload>
        </view>
      </view>
    </view>

    <!-- <view class="content">
      <u--form labelPosition="left" labelAlign="left" labelWidth="90">
        <u-form-item label="跟进记录：" borderBottom>
          <text class="redFlag">*</text>
          <view>
            <textarea v-model="remark" class="Utextarea flexBox" />
          </view>
        </u-form-item>
        <u-form-item label="附件：" borderBottom>
          <u-upload
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            :maxCount="6"
          ></u-upload>
        </u-form-item>
      </u--form>
    </view> -->
    <view class="footer">
      <button @click="handleClick">确认</button>
    </view>
    <!-- <view class="listBoxCot_btn">
      <view class="small_btn green" @click="handleClick">提交</view>
    </view> -->
  </view>
</template>

<script>
import { getWorker, workerToFollowUp, completeTodo } from '@/config/api'
export default {
  data() {
    return {
      infoData: {},
      fileList1: [],
      name: '',
      remark: '',
      id: null,
      fl_userid: uni.getStorageSync('UserId'),
    }
  },
  onLoad(options) {
    this.id = options.id
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getWorker({
        fl_userid: this.fl_userid,
      })
      this.infoData = res
    },
    deletePic(event) {
      this.fileList1.splice(event.index, 1)
    },
    async afterRead(event) {
      var _this = this
      console.log(event)
      uni.uploadFile({
        url: 'https://fastdemo.165.busybiz.cn/api/common/upload',
        filePath: event.file.url,
        name: 'file', //后台对应的参数名
        success: (res) => {
          var result = JSON.parse(res.data)
          _this.fileList1.push({
            name: event.file.name,
            size: event.file.size,
            thumb: result.data.fullurl,
            type: 'image',
            url: result.data.fullurl,
          })
        },
        fail(err) {
          console.log(err, '接口调用失败')
        },
      })
    },
    async handleClick() {
      if (!this.remark) {
        uni.showToast({
          title: '请输入跟进记录!',
          icon: 'none',
          duration: 2000,
        })
        return
      }
      let updataUrl = this.fileList1.map((item) => {
        return item.url
      })

      try {
        const result = await completeTodo({
          userid: this.infoData.id,
          todo_id: this.id,
          todo_remark: this.remark,
          complete_file_url: updataUrl.join(','),
        })
        uni.showToast({
          title: '提交成功!',
          icon: 'none',
          duration: 2000,
        })

        uni.navigateTo({
          url: '/pages/client/index',
        })
      } catch {
        uni.showToast({
          title: '提交出错!',
          icon: 'none',
          duration: 2000,
        })
      }
    },
  },
}
</script>

<style lang="scss">
page {
  // padding: 0 30rpx;
  width: 100%;
  /deep/ .u-form-item__body__left {
    align-items: flex-start !important;
    width: 50rpx;
  }
  .content {
    background: #fff;
    padding: 0 40rpx;
    margin-top: 20rpx;
  }

  .flexBox {
    // margin-left: 50rpx;
    width: 100%;
  }

  .listBoxCot_btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
  }
  .small_btn {
    padding: 10rpx 30rpx;
    border: 1px solid #eaecef;
    border-radius: 10rpx;
    margin-right: 50rpx;
  }
}
.Utextarea {
  height: 200rpx;
  text-indent: 30rpx;
}
.title,
.cancel {
  text-align: center;
  line-height: 35rpx;
  font-size: 28rpx;
  padding: 20rpx 0;
}
.cancel {
  border-top: 20rpx solid #eaecef;
}
.list {
  height: 420rpx;
  overflow-y: scroll;
  view {
    text-align: center;
    line-height: 70rpx;
    border-top: 1rpx solid #eaecef;
  }
  & > view:last-child {
    border-bottom: 1rpx solid #eaecef;
  }
}
.title {
  view {
    font-size: 30rpx;
    font-family: PingFang SC-中黑体, PingFang SC;
    font-weight: normal;
    display: flex;
    align-items: center;
    font-weight: 550;
  }
  view:before {
    content: '';
    display: inline-block;
    width: 4rpx;
    height: 30rpx;
    background: #159eec;
    margin-right: 10rpx;
  }
}

.mt20 {
  margin-top: 20rpx;
}
.addressText {
  text-align: left;
  width: 100%;
}
.bgcc {
  width: 100%;
  background-color: #f4f5f7;
}

.ml50 {
  margin-left: 50rpx;
  width: 100%;
}
.w50rpx {
  width: 200rpx;
}

.mt20 {
  margin-top: 20rpx;
}

.redFlag {
  position: absolute;
  left: -20rpx;
  color: red;
  display: inline-block;
  top: 20rpx;
}
.green {
  background: rgb(41, 121, 255);
  color: #fff;
}

.u-form-item {
  position: relative;
}

/deep/ .u-form-item__body__left {
  width: 100rpx !important;
  font-size: 12rpx !important;
}
.handlePeople,
.box {
  background: #fff;
  margin: 16rpx 28rpx;
  border-radius: 8rpx;
  padding: 0 28rpx;
}
.handlePeople {
  color: #5a6062;
  height: 72rpx;
  line-height: 72rpx;
}
.box {
  padding: 28rpx;
  .item:last-child {
    margin-bottom: 0;
  }
  .item {
    margin-bottom: 28rpx;
    .label {
      margin-bottom: 8rpx;
      color: #5a6062;
      .must {
        color: red;
      }
    }
    /deep/ .u-textarea {
      background: #f6f6f7;
      border-radius: 8rpx;
    }
    .select {
      /deep/ .u-input.u-border.u-input--radius.u-input--square {
        border: 1rpx solid #9999a5;
      }
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background: #fff;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: end;
  button {
    margin: 0;
    padding: 0;
    font-size: 28rpx;
    border-radius: 8rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
  }
  button::after {
    border: none;
  }
  button:first-child {
    background: #3c9cff;
    color: #fff;
    width: 140rpx;
  }
}
</style>
